<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>加载Loading</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">

<style>
    * {padding:0;margin:0;box-sizing:border-box;}
    *:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
    body {font-size: 14px;background: #f5f5f5;}
    .title-l {font-size: 18px;line-height: 40px;margin-bottom: 10px;}
    .checkbox {margin-bottom: 30px;}

/*颜色*/
:root{--dark:#5d677c;--dark-hover:#384253;--tpl:#525CE5;--tpl-hover:#7773d7;--default:#8783e1;--default-hover:#7773d7;--red:#f1716c;--red-hover:#d15451;--orange:#f57e00;--orange-hover:#cf6c03;--yellow:#fac413;--yellow-hover:#e9b712;--green:#26bc5c;--green-hover:#179b47;--cyan:#8cd03d;--cyan-hover:#7dc22d;--blue:#768fe7;--blue-hover:#677ecf;--purple:#9e83e1;--purple-hover:#896eca;--white:#ffffff;--white-hover:#f5f5f5;--gray:#b2b2b2;--gray-hover:#989898;--black:#4a4a4a;--black-hover:#000000;}



/*loading*/
.loading-mask {position: fixed;width:100%;height:100%;top:0;left:0;background:rgba(240,240,245,.8);z-index:500;}
.loading-mask .loader {position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.loading-mask .loader-icon {
    margin:0 auto;
    display: block;
    width: 32px;
    height: 32px;
    -webkit-animation: circle infinite .75s linear;
    animation: circle infinite .75s linear;
    border: 2px solid var(--tpl);
    border-top-color: transparent;
    border-radius: 100%
}
.loading-mask .loader-txt {margin-top: 5px;color:#6a6a6a;font-size:13px;}

@-webkit-keyframes circle {
    from {-webkit-transform: rotate(0)}
    to {-webkit-transform: rotate(360deg)}
}
.fade-in {-webkit-animation:fadeIn .3s ease both;opacity:0;}
.fade-out {-webkit-animation:fadeOut .3s ease both;}
@-webkit-keyframes fadeIn {
    to {opacity:1;}
}
@-webkit-keyframes fadeOut {
    to {opacity:0;}
}



/*第二种loading动画*/
.loading-mask .circular {
    margin:0 auto;
    height: 42px;
    width: 42px;
    animation: loading-rotate 2s linear infinite
}

.loading-mask .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90,150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: #409eff;
    stroke-linecap: round
}
@keyframes loading-rotate {
    to {
        transform: rotate(1turn)
    }
}

@keyframes loading-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -40px
    }

    to {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -120px
    }
}

</style>

</head>
<body>

<div style="padding:100px;">

    <button class="btn btn-primary btn-1">全屏 loading</button>
    <div>
        <code>
            loading.render();
        </code>
    </div>

    <br><br>

    <div style="width:600px;height: 400px;background:var(--white);border:1px dashed var(--tpl);padding:30px;position:relative;" id="box">
        <button class="btn btn-success btn-2">loading</button>
        <pre style="font-size:16px;">
            <p>在容器内触发loading状态，只允许在当前区域内，用于更新当前容器内容</p>
            <p>loading.render('#box','正在提交，请稍后...');</p>
        </pre>
    </div>

</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
$(function(){

    //ajax加载前全屏loading
    window.loading = {
        render:function(txt,obj){
            var t = txt?txt:'';
            if(typeof txt === 'object') {
                obj = txt;
                t = '';
            } 
            var o = obj?(obj.target?$(obj.target):$('body')):$('body');
            if(o.length == 0) {
                o = $('body');
                console.log('%c loading未找到目标结构 '+obj.target+' ','background:orange;color:#000;')
            }
            // o.append('<div class="loading-mask fade-in" '+(obj?(obj.target?'style="position:absolute;"':""):"")+'><div class="loader"><div class="loader-icon"></div><div class="loader-txt">'+t+'</div></div></div>');
            o.append('<div class="loading-mask fade-in" '+(obj?(obj.target?'style="position:absolute;"':""):"")+'><div class="loader"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg><div class="loader-txt">'+t+'</div></div></div>');
            setTimeout(function(){
                $('.loading-mask').removeClass('fade-in');
            },300)
        },
        close:function(){
            $('.loading-mask').addClass('fade-out');
            setTimeout(function(){
                $('.loading-mask').remove();
            },300)
        }
    }

    $('.btn-1').click(function(){
        loading.render();
        // loading.render('加载中...');
        setTimeout(function(){
            loading.close()
        },3000)
    })

    $('.btn-2').click(function(){
        loading.render('正在提交，请稍后...',{target:'#box'});
        // loading.render({target:'#box'});
        setTimeout(function(){
            loading.close()
        },3000)
    })




})
</script>

</body>
</html>